<!DOCTYPE html>
<html lang="cn" xmlns:th="http://www.thymeleaf.org">
<head th:replace="decorator :: common_header(~{::'title/text()'},~{::customHead})">
    <meta charset="UTF-8">
    <title>接口测试网站</title>

    <!--/*/ <th:block th:fragment="customHead" > /*/-->
    <!-- jQuery 2.2.3 -->

    <!--/*/ </th:block > /*/-->

</head>
<body th:replace="decorator :: common_body(~{::mainBody},~{::tailScript})">

<!--/*/ <th:block th:fragment="mainBody" >  /*/-->
<div class="container" style="margin-top: 100px">
    <div class="row">
        <ul class="nav nav-tabs">
            <li class="active" id="httpRequest"><a href="javascript:void(0);">HTTP模拟请求</a></li>
            <li id="httpWatch"><a href="javascript:void(0);">HTTP模拟状态查询</a></li>
        </ul>
    </div>
    <div id="watch" style="margin-top: 50px;display: none">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-6">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="请输入页面地址">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="button"> 查看分析</button>
                    </span>
                </div>
            </div>
            <div class="col-md-3"></div>
        </div>

        <div class="row" style="margin-top: 50px">
            <div class="col-md-12">
                <p>一些常见的状态码为：</p>
                <p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;200 - 服务器成功返回网页 404 - 请求的网页不存在 503 - 服务不可用</p>
                <p>所有状态解释：<a href="javascript:void(0);" id="cat">点击查看</a></p>
            </div>

            <div class="col-md-12" style="display: none" id="status">
                <p>http状态返回代码 1xx（临时响应）</p>
                <p>表示临时响应并需要请求者继续执行操作的状态代码。</p>
                <p>http状态返回代码 代码 说明</p>
                <p>100 （继续） 请求者应当继续提出请求。 服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。</p>
                <p>101 （切换协议） 请求者已要求服务器切换协议，服务器已确认并准备切换。</p>
                <p> http状态返回代码 2xx （成功）</p>
                <p> 表示成功处理了请求的状态代码。</p>
                <p> http状态返回代码 代码 说明</p>
                <p> 200 （成功） 服务器已成功处理了请求。 通常，这表示服务器提供了请求的网页。</p>
                <p>201 （已创建） 请求成功并且服务器创建了新的资源。</p>
                <p>202 （已接受） 服务器已接受请求，但尚未处理。</p>
                <p>203 （非授权信息） 服务器已成功处理了请求，但返回的信息可能来自另一来源。</p>
                <p>204 （无内容） 服务器成功处理了请求，但没有返回任何内容。</p>
                <p>205 （重置内容） 服务器成功处理了请求，但没有返回任何内容。</p>
                <p>206 （部分内容） 服务器成功处理了部分 GET 请求。</p>
                <p> http状态返回代码 3xx （重定向）</p>
                <p>表示要完成请求，需要进一步操作。 通常，这些状态代码用来重定向。</p>
                <p>http状态返回代码 代码 说明</p>
                <p>300 （多种选择） 针对请求，服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作，或提供操作列表供请求者选择。</p>
                <p>301 （永久移动） 请求的网页已永久移动到新位置。 服务器返回此响应（对 GET 或 HEAD 请求的响应）时，会自动将请求者转到新位置。</p>
                <p>302 （临时移动） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。</p>
                <p>303 （查看其他位置） 请求者应当对不同的位置使用单独的 GET 请求来检索响应时，服务器返回此代码。</p>
                <p>304 （未修改） 自从上次请求后，请求的网页未修改过。 服务器返回此响应时，不会返回网页内容。</p>
                <p>305 （使用代理） 请求者只能使用代理访问请求的网页。 如果服务器返回此响应，还表示请求者应使用代理。</p>
                <p>307 （临时重定向） 服务器目前从不同位置的网页响应请求，但请求者应继续使用原有位置来进行以后的请求。</p>
                <p>http状态返回代码 4xx（请求错误）</p>
                <p>这些状态代码表示请求可能出错，妨碍了服务器的处理。</p>
                <p> http状态返回代码 代码 说明</p>
                <p> 400 （错误请求） 服务器不理解请求的语法。</p>
                <p> 401 （未授权） 请求要求身份验证。 对于需要登录的网页，服务器可能返回此响应。</p>
                <p>403 （禁止） 服务器拒绝请求。</p>
                <p>404 （未找到） 服务器找不到请求的网页。</p>
                <p>405 （方法禁用） 禁用请求中指定的方法。</p>
                <p> 406 （不接受） 无法使用请求的内容特性响应请求的网页。</p>
                <p> 407 （需要代理授权） 此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。</p>
                <p>408 （请求超时） 服务器等候请求时发生超时。</p>
                <p>409 （冲突） 服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。</p>
                <p> 410 （已删除） 如果请求的资源已永久删除，服务器就会返回此响应。</p>
                <p>411 （需要有效长度） 服务器不接受不含有效内容长度标头字段的请求。</p>
                <p>412 （未满足前提条件） 服务器未满足请求者在请求中设置的其中一个前提条件。</p>
                <p>413 （请求实体过大） 服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。</p>
                <p>414 （请求的 URI 过长） 请求的 URI（通常为网址）过长，服务器无法处理。</p>
                <p>415 （不支持的媒体类型） 请求的格式不受请求页面的支持。</p>
                <p> 416 （请求范围不符合要求） 如果页面无法提供请求的范围，则服务器会返回此状态代码。</p>
                <p> 417 （未满足期望值） 服务器未满足"期望"请求标头字段的要求。</p>
                <p> http状态返回代码 5xx（服务器错误）</p>
                <p> 这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误，而不是请求出错。</p>
                <p> http状态返回代码 代码 说明</p>
                <p> 500 （服务器内部错误） 服务器遇到错误，无法完成请求。</p>
                <p>501 （尚未实施） 服务器不具备完成请求的功能。 例如，服务器无法识别请求方法时可能会返回此代码。</p>
                <p> 502 （错误网关） 服务器作为网关或代理，从上游服务器收到无效响应。</p>
                <p>503 （服务不可用） 服务器目前无法使用（由于超载或停机维护）。 通常，这只是暂时状态。</p>
                <p>504 （网关超时） 服务器作为网关或代理，但是没有及时从上游服务器收到请求。</p>
                <p>505 （HTTP 版本不受支持） 服务器不支持请求中所用的 HTTP 协议版本。</p>
                <p>一些常见的http状态返回代码为：</p>
                <p>200 - 服务器成功返回网页</p>
                <p>404 - 请求的网页不存在</p>
                <p>503 - 服务不可用</p>
            </div>

        </div>

    </div>


    <div id="request">
        <div class="row">
            <div class="col-md-12">
                <h3>在线HTTP GET/POST 请求测试工具</h3>
            </div>
            <div class="col-md-12">
                <h5>支持的请求协议有：Post、Get请求。</h5>
            </div>
            <h5 class="page-header"></h5>
        </div>
        <div class="row">
            <div class="col-md-2">
                <div class="form-group">
                    <select id="http" name="http" class="selectpicker show-tick form-control">
                        <option value="" selected="selected">POST</option>
                        <option value="MALE">GET</option>
                    </select>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <select id="enconding" name="enconding" class="selectpicker show-tick form-control">
                        <option value="" selected="selected">UTF-8</option>
                    </select>
                </div>
            </div>
            <div class="col-md-4">
                <div class="form-group">
                    <input id="url" name="url" type="text" placeholder="请求地址，以http://开头，不支持本地接口"
                           class="form-control field"/>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <button id="send" type="button" class="btn btn-primary btn-block btn-flat">请求
                    </button>
                </div>
            </div>
            <div class="col-md-2">
                <div class="form-group">
                    <label class="btn btn-default">
                        <input type="checkbox" class="toggle" value="1" id="isValue"> 是否有参数
                    </label>
                </div>
            </div>
        </div>

        <div class="table-responsive" id="kv" style="display: none">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>参数名</th>
                    <th>参数值</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="tby">
                <tr>
                    <td>
                        <button id="add" type="button" class="btn btn-primary btn-block btn-flat">添加参数
                        </button>
                    </td>
                    <td>
                        <button id="change1" type="button" class="btn btn-primary btn-block btn-flat">批量添加（JSON数据）
                        </button>
                    </td>
                    <td></td>
                </tr>
                </tbody>
            </table>
        </div>


        <div class="row" style="display: none" id="json">
            <div class="col-md-12">
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>参数支持JSON格式，以及GET参数请求方式</th>
                        <th>
                            <button id="change2" type="button" class="btn btn-success btn-block btn-flat">返回键值对添加参数
                            </button>
                        </th>
                    </tr>
                    </thead>
                </table>
            </div>
            <div class="col-md-12">
                 <textarea class="form-control" rows="5" cols="15" id="jsonParam"
                           placeholder="这里可以输入a=2&b=2，或者{'a':2,'b':2}为了测试成功性，请不要输入相同的参数
                "></textarea>
            </div>
        </div>

        <div class="row" style="margin-top: 100px">
            <div class="col-md-5">
                <h6>Response Header</h6>
                <textarea class="form-control" rows="12" cols="15" name=textarea placeholder="响应头信息"></textarea>
            </div>
            <div class="col-md-7">
                <h6>Response Body</h6>
                <textarea class="form-control" rows="14" cols="15" name=textarea placeholder="响应体信息"></textarea>
            </div>
        </div>


        <div class="row" style="margin-top: 50px">
            <div class="col-md-12">
                <h4>Requests Header | Http Header</h4>
            </div>
        </div>
        <div class="table-responsive">
            <table class="table table-bordered">
                <thead>
                <tr>
                    <th>Header</th>
                    <th>解释</th>
                    <th>示例</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>
                        Accept
                    </td>
                    <td>
                        指定客户端能够接收的内容类型
                    </td>
                    <td>
                        Accept:text/plain,text/html
                    </td>
                </tr>
                <tr>
                    <td>
                        Accept-Charset
                    </td>
                    <td>
                        浏览器可以接受的字符编码集
                    </td>
                    <td>
                        Accept-Charset:utf-8
                    </td>
                </tr>
                <tr>
                    <td>
                        Accept-Encoding
                    </td>
                    <td>
                        指定浏览器可以支持的web服务器返回内容压缩编码类型
                    </td>
                    <td>
                        Accept-Encoding:compress,gzip
                    </td>
                </tr>
                <tr>
                    <td>
                        Accept-Language
                    </td>
                    <td>
                        浏览器可接受的语言
                    </td>
                    <td>
                        Accept-Language:en,zh
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<!--/*/ </th:block>  /*/-->


<!-- 原型注释  -->
<!--/*/ <th:block th:fragment="tailScript" > /*/-->
<script type="text/javascript" src="js/toggle.js"></script>
<!--/*/ </th:block>  /*/-->
</body>
</html>